<template>
	<div id="passGameList" class="container">
		<div class="condition">
			<div class="row_one">
				<span>当前关卡</span>
				<el-select class="select" v-model="param.checkPointId" placeholder="请选择" style="width: 1.8rem;">
					<el-option v-for="item in periodOptions" :key="item.checkPointId" 
							   :label="item.checkPointName" :value="item.checkPointId">
					</el-option>
				</el-select>
				&nbsp;
				<el-input v-model="param.keyWords" class="input_search" maxlength="100"
					      style="width: 3.5rem;" placeholder="搜索 机构名称/负责人/手机号" clearable>
				</el-input>
				&nbsp;
				<div class="search_btn" v-if="hasApi('passGameList')" @click="search()">搜索</div>
			</div>
		</div>
		<div class="table_div">
			
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 1.5rem;">编号</td>
						<td style="width: 3rem;">校区名</td>
						<td style="width: 2rem;">负责人</td>
						<td style="width: 2rem;">手机号</td>
						<td style="width: 2rem;">合作类型</td>
						<td style="width: 3rem;">合作时间</td>
						<td style="width: 2rem;">跟进人</td>
						<td style="width: 2rem;">当前关卡</td>
						<td style="width: 2rem;">任务进展</td>
						<td style="width: 1.5rem;">排名</td>
						<td style="width: 2rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="item,index in passGameList">
						<td>{{index+1}}</td>
						<td>{{item.schoolName}}</td>
						<td>{{item.userName}}</td>
						<td>{{item.userPhone}}</td>
						<td>{{item.cooperationMode}}</td>
						<td>{{item.cooperationDate}}</td>
						<td>{{item.followUserName}}</td>
						<td>{{item.curCheckPointName}}</td>
						<td>{{item.solvedTitleNum}}/{{item.totalTitleNum}}</td>
						<td>{{item.topNum}}</td>
						<td>
							<span class="operate_btn" v-if="hasApi('passGameQuestionList')" @click="openDetail(item)">查看详情</span>
						</td>
					</tr> 
				</tbody>
			</table>
		</div>
		<el-pagination
	      	layout="total, sizes, prev, pager, next, jumper"
	      	@size-change="pageSizeChange"
      	  	@current-change="pageIndexChange"
      	  	:current-page="param.pageIndex"
	      	:total="count">
	    </el-pagination>
		
	</div>
</template>
<script>
	var vm;
	export default {
		components: {},
		data: function() {
			return {
				keyWords: "",
				param : {
					userId: "",
					orgId: "",
					keyWords : "",
					checkPointId : "0",
					pageIndex : 1,
					pageSize : 10,
				},
				count : null,
				periodOptions: [],
				passGameList: [],
			}
		},
		methods: {
			search: function(currPage) {
				//获取分页信息
				vm.param.currPage = currPage || 1;
				
				api.passGameList(vm.param).then(function(data) {
					vm.passGameList = data.list;
					vm.count = data.totalCount;
				});
			},
			openDetail: function(info) {
				//查看详情
				this.$emit('openInfoDetail', info);
			},
			pageSizeChange: function(val) {
				vm.param.pageSize = val;
				vm.search();
			},
			pageIndexChange: function(val) {
				vm.param.pageIndex = val;
				vm.search(val);
			},
			loadData: function() {
				api.peroidList().then(function(data) {
					vm.periodOptions = data.list;
					vm.periodOptions.splice(0, 0, {
						checkPointId: "0",
						checkPointName: "全部",
						honorId: "0",
						honorName: "全部"
					});
				});
			},
		},
		mounted: function() {
			vm.search();
			vm.loadData();
		},
		created: function() {
			vm = this;
			var user = tool.getItem(lsKey.user, true);
			//设置参数
			vm.param.userId = user.userId;
			vm.param.orgId = user.orgId;
		}
	}
</script>
<style scoped src="../../../style/module/table.css"></style>
<style lang="scss">
	#passGameList {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem !important;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		.input_search {
			.el-input__inner {
				background-color: rgb(247, 248, 250);
			}
		}
	}
</style>
<style scoped>
	#passGameList {
		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #666666;
		font-size: 0.16rem;
	}
	
	.condition {
		padding: 0.2rem 0;
	}
	
	.operate_btn {
		font-size: 0.16rem;
		color: #2e83f6;
		cursor: pointer;
		user-select:none;
	}
	
	
</style>